<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>皮蛋布丁的聊天室</title>
    <script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/stomp.min.js"></script>
</head>
<body>
    <table>
        <tr>
            <td>请输入用户名：</td>
            <td><input type="text" id="name"></td>
        </tr>
        <tr>
            <td><input type="button" id="connect" value="连接"></td>
<!--            disabled="disabled"：默认不可点击-->
            <td><input type="button" id="disconnect" disabled="disabled" value="断开连接"></td>
        </tr>
    </table>

<!--聊天界面-->
<div id="chat" style="display: none">
    <table>
        <tr>
            <td>请输入聊天内容</td>
            <td><input type="text" id="content"></td>
            <td><input type="button" id="send" value="发送"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>

<!--    展示聊天内容-->
    <div id="conversation">群聊进行中...</div>
</div>
<script>
<!--    定义连接方法-->
    $(function () {
        //连接按钮事件
        $("#connect").click(function () {
            connect();
        })

        //断开连接按钮事件
        $("#disconnect").click(function () {
            if (stompClient != null) {
                //断开连接
                stompClient.disconnect();
            }
            //恢复按钮状态
            setConnection(false);
        })

        //发送按钮点击事件
        $("#send").click(function () {
            //发送消息(参数1：发送地址；参数2：消息优先级；参数3：JSON消息对象)
            stompClient.send('/app/hello',{},JSON.stringify({'name':$('#name').val(),'content':$('#content').val()}))
        })
    })

    var stompClient = null;

    function connect() {
        //判断是否输入用户名
        if (!$("#name").val()) {
            return;
        }
        //建立连接
        var socket = new SockJS('/chat');
        stompClient = Stomp.over(socket);
        //参数1：建立优先级；参数2：连接成功的回调；参数3：连接失败的回调
        stompClient.connect({},function (success) {
            //设置按钮状态
            setConnection(true);
            //订阅服务器上的消息
            //参数1：服务器上的地址；参数2：服务器收到的消息
            stompClient.subscribe('/topic/greetings',function (msg) {
                showGreeting(JSON.parse(msg.body));
            })
        })
    }

    function setConnection(flag) {
        //参数1：属性；参数2：设置状态
        $("#connect").prop("disabled",flag);
        $("#disconnect").prop("disabled",!flag);
        //显示div
        if (flag) {
            $("#chat").show();  //显示
        } else {
            $("#chat").hide();  //隐藏
        }
    }

    function showGreeting(msg) {
        $("#conversation").append('<div>' + msg.name + ':' + msg.content + '</div>');
    }
    
</script>

</body>
</html>